<template>
  <div class="title">会员购商品管理</div>
  <div class="top">添加商品</div>
  <div class="container">
    <el-input
      v-model="shopinfo.shop_name"
      class="shopname"
      placeholder="请输入商品名"
      clearable
    />
    <el-input
      v-model="shopinfo.shop_price"
      class="shopprice"
      placeholder="请输入商品价格"
      clearable
    />
    <el-input
      v-model="shopinfo.shop_details"
      :rows="10"
      type="textarea"
      placeholder="请输入该商品简介"
      class="textarea"
    />
    <el-select
      v-model="label"
      placeholder="请选择"
      class="shopstauts"
      @change="selectClass"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <div class="upload">
      上传商品图片：
      <input
        ref="inputer"
        type="file"
        accept="image/png,image/jpeg,image/gif,image/jpg"
        @change="addImg"
      >
    </div>
    <el-button
      class="submitbtn"
      type="primary"
      round
      @click="addGoodsInfo()"
    >
      提交
    </el-button>
  </div>
  <div class="bottom">下架商品</div>
  <el-table :data="shoplist" border style="width: 46.3%">
    <el-table-column prop="shop_id" label="商品id" width="70" />
    <el-table-column prop="shop_name" label="商品名称" width="250" />
    <el-table-column prop="shop_price" label="商品价格" width="150" />
    <el-table-column prop="shop_status" label="商品状态" width="150" />
    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button type="danger" @click="delGame(scope.row.shop_id)">下架</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    v-model="delDialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <span>是否下架此商品？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="delDialogVisible = false">Cancel</el-button>
        <el-button
          type="primary"
          @click="delGoodsInfo(delid)"
        >Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script>
import { ElInput } from 'element-plus'
export default {
  components: { ElInput },
  data() {
    return {
      shopinfo: {
        shop_name:'',
        shop_price:'',
        shop_img:'',
        shop_details:'',
        shop_status:''
      },
      options:[
        {
          value:'现货',
          label:'现货'
        },
        {
          value:'预售',
          label:'预售'
        }
      ],
      label:'',
      delDialogVisible:false,
      shoplist:[],
      delid:''
    }
  },
  created() {
    this.getShopList()
  },
  methods: {
    selectClass(label) {
      this.shopinfo.shop_status = label
      console.log(this.shopinfo.shop_status)
    },
    addImg(){
      const inputDOM = this.$refs.inputer
      // 通过DOM取文件数据
      const files = inputDOM.files
      const file = files[0]
      this.shopinfo.shop_img = file
    },
    async addGoodsInfo() {
      const formData = new FormData()
      formData.append('shop_name', this.shopinfo.shop_name)
      formData.append('shop_price', this.shopinfo.shop_price)
      formData.append('shop_img', this.shopinfo.shop_img)
      formData.append('shop_details', this.shopinfo.shop_details)
      formData.append('shop_status', this.shopinfo.shop_status)
      const res = await this.$api.shop.addGoodsInfo(formData)
      console.log(this.shopinfo, '-------shopinfo')
      if(res.data.status === 0) {
        alert('上传成功!')
        this.getShopList()
      }else {
        alert('上传失败!')
      }
    },
    async getShopList() {
      const res = await this.$api.shop.getShopList()
      const { data:{ data:shoplist } } = res
      this.shoplist = [
        ...shoplist
      ]
      console.log(this.shoplist, '-----this.shoplist')
    },
    delGame(data) {
      this.delDialogVisible = true
      this.delid = data
    },
    async delGoodsInfo(data) {
      const saId = { 'shop_id':data }
      const res = await this.$api.shop.delGoodsInfo(saId)
      if(res.data.status !== 0) {
        alert('下架失败!')
      } else {
        alert('下架成功!')
        this.delDialogVisible = false
        this.getShopList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-bottom: 50px;
}
.top {
  margin-bottom: 20px;
}
.container {
  display: flex;
  flex-direction: column;
  .shopname {
    width: 500px;
    margin-bottom: 30px;
  }
  .shopprice {
    width: 200px;
    margin-bottom: 30px;
  }
  .textarea {
    width: 1000px;
    margin-bottom: 30px;
  }
  .shopstauts {
    width: 100px;
    margin-bottom: 30px;
  }
  .upload {
    margin-bottom: 50px;
  }
  .submitbtn {
    width: 100px;
    margin-left: 350px;
    margin-bottom: 50px;
  }
}
.bottom {
  margin-bottom: 20px;
}
</style>
